<template>
  <div id="mountNode" :style="{ width: width }">
    <div class="editor">
      <!--顶部菜单栏-->
      <toolbar @getPopupObj="getPopupObj" v-show="iseditable" />
      <div class="bottom-container">
        <!--左边菜单栏-->
        <!-- <item-panel @getMenuData="getMenuData" /> -->
        <!--右边信息详情栏-->
        <detail-panel />
        <!--右下角的导航器-->
        <!-- <minimap /> -->
        <!--画布-->
        <page
          :height="height"
          :width="width"
          :data="data"
          :uploadJsonData="uploadJsonData"
        />
      </div>
      <!--编辑和详情弹窗-->
      <detailDialog :detailObj="detailObj"></detailDialog>

      <!--右击后出现的菜单-->
      <context-menu
        @getMenuData="getMenuData"
        :iseditable="iseditable"
        v-show="isShowContext"
      />
    </div>
    <Flow />

    <drawer />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Toolbar from '../Toolbar'
import ItemPanel from '../ItemPanel'
import Page from '../Page'
import Flow from '../Flow'
import ContextMenu from '../ContextMenu'
import Editor from '../Base/Editor'
import command from '../../command'
import UploadDialog from '../../uploadDialog.vue'
import detailDialog from '../DetailPanel/detailDialog'
import drawer from '../DetailPanel/drawer.vue'
import DetailPanel from '../DetailPanel/index.vue'

export default {
  name: 'G6Editor',
  components: {
    Toolbar,
    ItemPanel,
    DetailPanel,
    // Minimap,
    Page,
    ContextMenu,
    UploadDialog,
    Flow,
    detailDialog,
    drawer
  },
  computed: {
    ...mapState({
      isShowContext: state => state.drawer.isShowContext
    })
  },
  props: {
    height: {
      type: Number,
      default: document.documentElement.clientHeight
    },
    width: {
      type: Number,
      default: document.documentElement.clientWidth
    },
    data: {
      type: Object,
      default: () => {}
    },
    iseditable: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    data: {
      handler(val) {
        this.uploadJsonData = val
      }
    }
  },
  created() {
    this.init()
    this.$store.dispatch('drawer/setisshowcontext', true)
  },
  data() {
    return {
      editor: {},
      command: null,
      popUpObj: {},
      detailObj: {},
      uploadJsonData: {}
    }
  },
  methods: {
    init() {
      this.editor = new Editor()
      this.command = new command(this.editor)
    },
    // 获取导入按钮事件
    getPopupObj(obj) {
      this.popUpObj = obj
    },
    // 右击后弹出弹窗展示节点数据
    getMenuData(data) {
      this.detailObj = data
    }
  }
}
</script>

<style scoped>
.bottom-container {
  border: 1px solid #2d65ad;
}
</style>
